<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">


<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--360浏览器优先以webkit内核解析-->


    <title>H+ 后台主题UI框架 - 主页示例</title>

    <link rel="shortcut icon" href="favicon.ico">
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/font-awesome.css}" rel="stylesheet">

    <link th:href="@{/css/animate.css}" rel="stylesheet">
    <link th:href="@{/css/style.css}" rel="stylesheet">


</head>

<body class="gray-bg">
<div class="row  border-bottom white-bg dashboard-header">
    <div class="col-sm-12">
        <div>
            <div class="ibox-content">
                <form role="form" class="form-inline">
                    <div class="form-group">
                        <label for="start" class="sr-only">始发地</label>
                        <input type="email" placeholder="请输入始发地" id="start" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="end" class="sr-only">终点站</label>
                        <input type="password" placeholder="请输入终点站" id="end" class="form-control">
                    </div>

                    <!-- <div class="form-group">

                         <label for="date" class="sr-only">出发时间</label>
                         <input type="password" placeholder="请输入出发时间" id="date" class="form-control">
                     </div>-->

                    <div class="form-group">
                        <label for="date" class="sr-only">出发时间</label>
                        <div class="col-sm-10">
                            <input id="date" placeholder="请输入出发时间" class="laydate-icon form-control layer-date">
                        </div>
                    </div>

                    <button class="btn btn-white" type="submit">查找</button>
                </form>
            </div>
        </div>
        <hr>
    </div>
    <div class="col-sm-12" id="box"></div>

</div>
<div class="wrapper wrapper-content"></div>
<script id="welcome-template" type="text/x-handlebars-template"></script>

<!-- 全局js -->
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>
<script src="js/plugins/layer/layer.min.js"></script>

<!-- 自定义js -->
<script src="js/content.js"></script>

<!-- layerDate plugin javascript -->
<script src="js/plugins/layer/laydate/laydate.js"></script>

<!-- vue -->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>

<!--时间控件-->
<script>
    //外部js调用
    laydate({
        elem: '#date', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
        event: 'focus' //响应事件。如果没有传入event，则按照默认的click
    });

    //日期范围限制
    var start = {
        elem: '#start',
        format: 'YYYY/MM/DD hh:mm:ss',
        min: laydate.now(), //设定最小日期为当前日期
        max: '2099-06-16 23:59:59', //最大日期
        istime: true,
        istoday: false,
        choose: function (datas) {
            end.min = datas; //开始日选好后，重置结束日的最小日期
            end.start = datas //将结束日的初始值设定为开始日
        }
    };
    var end = {
        elem: '#end',
        format: 'YYYY/MM/DD hh:mm:ss',
        min: laydate.now(),
        max: '2099-06-16 23:59:59',
        istime: true,
        istoday: false,
        choose: function (datas) {
            start.max = datas; //结束日选好后，重置开始日的最大日期
        }
    };
    laydate(start);
    laydate(end);
</script>

<!--vue-->
<script type="text/javascript">
    window.onload = function () {
        var vm = new Vue({
            el: '#box',
            data: {
                msg: 'Hello World!',
            },
            methods: {
                get: function () {
                    //发送get请求
                    this.$http.get('/try/ajax/ajax_info.txt').then(function (res) {
                        document.write(res.body);
                    }, function () {
                        console.log('请求失败处理');
                    });
                }
            }
        });
    }
</script>

</body>

</html>
